<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini LLM Chat</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        #app {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background-color: #4a90e2;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .model-selector {
            padding: 10px 20px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .model-selector label {
            margin-right: 10px;
            font-weight: bold;
        }
        
        .model-selector select {
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        
        .chat-container {
            height: 500px;
            overflow-y: auto;
            padding: 20px;
        }
        
        .message {
            margin-bottom: 15px;
            display: flex;
        }
        
        .user-message {
            justify-content: flex-end;
        }
        
        .ai-message {
            justify-content: flex-start;
        }
        
        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 15px;
            word-wrap: break-word;
        }
        
        .user-message .message-content {
            background-color: #4a90e2;
            color: white;
        }
        
        .ai-message .message-content {
            background-color: #f0f0f0;
            color: #333;
        }
        
        .input-container {
            display: flex;
            padding: 20px;
            border-top: 1px solid #eee;
        }
        
        #user-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
        }
        
        #send-button {
            margin-left: 10px;
            padding: 10px 20px;
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }
        
        #send-button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .status {
            text-align: center;
            padding: 10px;
            color: #666;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>Mini LLM Chat</h1>
        </div>
        
        <div class="model-selector">
            <label for="model-select">选择模型:</label>
            <select id="model-select" v-model="selectedModel">
                <option value="base">基础模型 (端口 4061)</option>
                <option value="finetuned">微调模型 (端口 4062)</option>
            </select>
        </div>
        
        <div class="chat-container" ref="chatContainer">
            <div v-if="messages.length === 0" class="status">
                开始与AI对话吧！
            </div>
            
            <div v-for="(message, index) in messages" 
                 :key="index" 
                 :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
                <div class="message-content">
                    {{ message.content }}
                </div>
            </div>
        </div>
        
        <div class="input-container">
            <input type="text" 
                   id="user-input" 
                   v-model="userInput" 
                   placeholder="输入消息..." 
                   @keyup.enter="sendMessage"
                   :disabled="isLoading">
            <button id="send-button" 
                    @click="sendMessage" 
                    :disabled="isLoading || !userInput.trim()">
                {{ isLoading ? '发送中...' : '发送' }}
            </button>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, nextTick } = Vue;
        
        createApp({
            setup() {
                const messages = ref([]);
                const userInput = ref('');
                const isLoading = ref(false);
                const chatContainer = ref(null);
                const selectedModel = ref('base'); // 默认选择基础模型
                    
                    // 滚动到底部
                    const scrollToBottom = async () => {
                        await nextTick();
                        if (chatContainer.value) {
                            chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
                        }
                    };
                    
                    // 获取API端点URL
                    const getApiUrl = () => {
                        switch(selectedModel.value) {
                            case 'base':
                                return 'http://localhost:4061/generate';
                            case 'finetuned':
                                return 'http://localhost:4062/generate';
                            default:
                                return 'http://localhost:4061/generate';
                        }
                    };
                    
                    // 发送消息
                    const sendMessage = async () => {
                        const text = userInput.value.trim();
                        if (!text || isLoading.value) return;
                        
                        // 添加用户消息
                        messages.value.push({
                            role: 'user',
                            content: text
                        });
                        
                        // 清空输入框
                        const userText = text;
                        userInput.value = '';
                        isLoading.value = true;
                        
                        // 滚动到底部
                        scrollToBottom();
                        
                        try {
                            // 调用API
                            const response = await fetch(getApiUrl(), {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({
                                    prompt: userText,
                                    max_length: 200
                                })
                            });
                            
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            
                            const data = await response.json();
                            
                            // 添加AI回复
                            messages.value.push({
                                role: 'assistant',
                                content: data.generated_text || '抱歉，我没有理解您的问题。'
                            });
                        } catch (error) {
                            console.error('Error:', error);
                            messages.value.push({
                                role: 'assistant',
                                content: '抱歉，出现了一些问题，请稍后再试。'
                            });
                        } finally {
                            isLoading.value = false;
                            scrollToBottom();
                        }
                    };
                    
                    // 初始消息
                    onMounted(() => {
                        scrollToBottom();
                    });
                    
                    return {
                        messages,
                        userInput,
                        isLoading,
                        chatContainer,
                        sendMessage,
                        selectedModel // 暴露selectedModel到模板
                    };
            }
        }).mount('#app');
    </script>
</body>
</html>